<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<title></title>
</head>
<body>
	<ul id="app">
		<li v-for="item in stuList" :key="item.id">{{item.id +':'+ item.name +':'+ item.age +':'+ item.hobby}}</li>
	</ul>
	
	<div id="stu">
		<input type="text" placeholder="请输入id" v-model="stu.id"/>
		<input type="text" placeholder="请输入name" v-model="stu.name"/>
		<input type="text" placeholder="请输入age" v-model="stu.age"/>
		<input type="text" placeholder="请输入hobby" v-model="stu.hobby"/>
		<button @click="addstu">提交</button>
		<div v-for="item in stuList" :key="item.id">
			<input type="radio" name="stu"/>{{item.name}}
		</div>
	</div>
	
	<script type="text/javascript">
		var app=new Vue({
			el:"#app",
			data:{
				stuList:[
					{id:1,name:"张三",age:18,hobby:"唱跳rap"},
					{id:2,name:"李四",age:19,hobby:"唱跳篮球"},
				]
			}
		})
		
		var stu=new Vue({
			el:"#stu",
			data:{
				stu:{},
				stuList:[
					{id:1,name:"张三",age:18,hobby:"唱跳rap"},
					{id:2,name:"李四",age:19,hobby:"唱跳篮球"},
				]
			},
			methods:{
				addstu(){
					console.log(this.stu);
					this.stuList.unshift(this.stu);
				}
			}
		})
	</script>
</body>
</html>